// index.ts
const img = require('../../utils/img')

Page({
  cdx: 0, // 窗口宽度

  /**
   * 页面的初始数据
   */
  data: {
    prurl: '',
    defaultImg: '',
    userInfo: { avatarUrl: '' },
    hasUserInfo: false,
    list: []
  },

  selectImg: function (e: any) {
    var current = e.target.dataset.src;
    this.setData({
      defaultImg: current,
      prurl: ''
    });
    this.initCanvas(this.data.defaultImg);
  },

  // 初始化
  initCanvas(imgUrl: string) {
    wx.createSelectorQuery()
      .select('#shareImg') // 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)

        // 清空画布
        ctx.clearRect(0, 0, width, height)

        // 图片对象
        const image = canvas.createImage()
        // 图片加载完成回调
        image.onload = () => {
          // 将图片绘制到 canvas 上
          ctx.drawImage(image, 0, 0, 150, 150)
        }
        // 设置图片src
        image.src = imgUrl
      })
  },

  // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
  // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
  getUserProfile() {
    let avatarUrl = ''
    let that = this;
    if (!that.data.userInfo.avatarUrl) {
      wx.showLoading({
        title: '生成中',
      })
      wx.getUserProfile({
        desc: '仅用于生成头像使用', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          that.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
          avatarUrl = this.headimgHD(res.userInfo.avatarUrl)
          that.drawImg(avatarUrl);
          wx.hideLoading()
        },
        fail: () => {
          wx.hideLoading()
        }
      });
    } else if (that.data.userInfo.avatarUrl) {
      avatarUrl = this.headimgHD(that.data.userInfo.avatarUrl)
      that.drawImg(avatarUrl);
    }
  },

  headimgHD(imageUrl: any) {
    imageUrl = imageUrl.split('/');    //把头像的路径切成数组
    //把大小数值为 46 || 64 || 96 || 132 的转换为0
    if (imageUrl[imageUrl.length - 1] && (imageUrl[imageUrl.length - 1] == 46 || imageUrl[imageUrl.length - 1] == 64 || imageUrl[imageUrl.length - 1] == 96 || imageUrl[imageUrl.length - 1] == 132)) {
      imageUrl[imageUrl.length - 1] = 0;
    }
    imageUrl = imageUrl.join('/'); //重新拼接为字符串
    return imageUrl;
  },

  drawImg(avatarUrl: string) {
    wx.createSelectorQuery()
      .select('#shareImg') // 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)

        // 清空画布
        ctx.clearRect(0, 0, width, height)


        let that = this
        // 图片对象
        const image = canvas.createImage()
        // 图片加载完成回调
        image.onload = () => {
          // 将图片绘制到 canvas 上
          ctx.drawImage(image, 0, 0, 150, 150)
          const image2 = canvas.createImage()
          // 图片加载完成回调
          image2.onload = () => {
            // 将图片绘制到 canvas 上
            ctx.drawImage(image2, 0, 0, 150, 150)
          }
          // // 设置图片src
          image2.src = that.data.defaultImg
        }
        // // 设置图片src
        image.src = avatarUrl

        setTimeout(function () {
          //绘制图片
          wx.canvasToTempFilePath({
            canvas,
            success: res => {
              // 生成的图片临时文件路径
              // const tempFilePath = res.tempFilePath
              // console.log(res.tempFilePath)
              that.setData({
                prurl: res.tempFilePath
              })
            },
          })
        }, 500);
      })
  },

  save: function () {
    var that = this;
    if (!that.data.prurl) {
      wx.showToast({
        title: '请先生成专属头像',
      })
      return;
    }
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success() {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    // 获取系统信息
    wx.getSystemInfo({
      success: res => {
        // 获取窗口宽高
        this.cdx = (res.windowWidth - 150) / 2
      }
    })
    this.setData({
      list: img.national,
      defaultImg: img.national[0]['url']
    })
    this.initCanvas(this.data.defaultImg);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '领取你的专属头像',
      success: function (res: any) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
      },
      fail: function (res: any) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  }
})